<template>
	<!-- 团队 -->
	<div id="bankList">
		<header class="mui-bar mui-bar-nav header">
			<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
			<h1 class="mui-title">{{routerTitle}}</h1>
		</header>
		<div class="mui-content">
			<pullRefresh @refresh="toRefresh">
				<div v-if="banks.length>0" class="order-list">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<div class="li-date">
								<span>姓名</span>
								<span>银行卡号</span>
							</div>
						</li>
						<li class="mui-table-view-cell" v-for="(item,index) in banks">
							<div class="li-date">
								<span style="text-align: left;">{{item.name}}</span>
								<span style="text-align: right;">{{item.bankCode}}</span>
							</div>
							<p>{{item.bankName}} {{item.bankBranch}}</p>
						</li>
					</ul>
				</div>
			</pullRefresh>
			<div class="addnew" @tap="showDetail=true">添加新卡号</div>
		</div>
		<div id="detail" :style="showDetail?'left:0':'left:101%'">
			<header class="mui-bar-nav report-header box-s" id="header">
				<div @tap="showDetail=false" class="mui-icon mui-icon-left-nav mui-pull-left"></div>
				<h1 class="mui-title">添加银行卡</h1>
			</header>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>银行卡号</label>
					<input type="text" v-model="newBankData.bankCode" class="mui-input-clear" placeholder="请输入卡号">
				</div>
				<div class="mui-input-row">
					<label>真实姓名</label>
					<input type="text" v-model="newBankData.name" class="mui-input-clear" placeholder="请输入姓名">
				</div>
				<div class="mui-input-row">
					<label>开户银行</label>
					<input type="text" v-model="newBankData.bankName" class="mui-input-clear" placeholder="银行名称如:xx银行">
				</div>
				<div class="mui-input-row">
					<label>支行名称</label>
					<input type="text" v-model="newBankData.bankBranch" class="mui-input-clear" placeholder="开户支行如:xx支行">
				</div>
				<div class="mui-button-row">
					<button style="margin: 0 5px;" type="button" class="mui-btn mui-btn-primary" @tap="sureAdd">确认</button>
					<button style="margin: 0 5px;" type="button" class="mui-btn mui-btn-danger" @tap='newBankData={name:"",bankName:"",bankBranch:"",bankCode:""};showDetail=false'>取消</button>
				</div>
			</form>
		</div>
	</div>
</template>

<script>
	import pullRefresh from "@/components/pullRefresh"
	import {
		findBanksByUser,
		addBank
	} from "@/api/my"
	export default {
		name: "bankList",
		components: {
			pullRefresh
		},
		data() {
			return {
				banks:[],
				showDetail:false,
				newBankData:{
					name:"",
					bankName:"",
					bankBranch:"",
					bankCode:""
				}
			}
		},
		mounted() {
			this.getBanks()
		},
		methods: {
			getBanks(callback) {
				mui.showLoading("等待中..", "div");
				findBanksByUser().then(res => {
					this.banks = res
					mui.hideLoading()
					callback && callback()
				})
			},
			sureAdd(){
				let newBankData = this.newBankData
				if(newBankData.name == "" || newBankData.bankName == "" || newBankData.bankBranch == "" || newBankData.bankCode == ""){
					mui.toast("请检查是否有未填项！")
					return;
				}
				mui.showLoading("等待中..", "div");
				addBank(newBankData).then(res=>{
					if(res.message){
						mui.toast(res.message)
					}else{
						mui.toast("增加成功！")
						this.newBankData={name:"",bankName:"",bankBranch:"",bankCode:""}
						this.showDetail = false;
						this.getBanks()
					}
					mui.hideLoading()
				})
			},
			toRefresh(callback) {
				//这里进行重新加载数据操作
				this.getBanks(() => {
					callback()
				})
			}
		}
	}
</script>

<style scoped>
	header.mui-bar {
		display: flex;
		justify-content: space-between;
	}
	.addnew{
		text-align: center;
		line-height: 50px;
		height: 50px;
		border-radius: 10px;
		color: #fff;
		background:#00BCD4;
		margin:15px 20px;
	}
	#detail{position:fixed;top:0;left:101%;width:100%;height:100%;background:#fff;transition:.4s all;z-index:999;overflow-y: scroll;}
	#detail>header{
		height:44px;
		border-bottom:0;
		background: #ff9934;
		z-index: 10;
		height: 44px;
		padding-right: 10px;
		padding-left: 10px;
	}
	#detail>header>.mui-icon{
		color: #fff!important;
		margin-right: -10px;
		margin-left: -10px;
		padding-right: 10px;
		padding-left: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#detail>header>.mui-title{
		right: 40px;
		left: 40px;
		display: inline-block;
		overflow: hidden;
		width: auto;
		margin: 0;
		text-overflow: ellipsis;
	}
</style>
